<template>
  <div class="flex flex-col h-full">
    <!-- 表格部分：展示告警列表 -->
    <div class="flex-1 overflow-auto">
      <el-table
        ref="tableRef"
        :data="alertData"
        style="width: 100%"
        border
        :header-cell-style="{ backgroundColor: '#f5f7fa', color: '#606266' }"
      >
        <el-table-column prop="alertCode" label="Alert code" width="120" />
        <el-table-column prop="alertName" label="Alert Name" min-width="200" />
        <el-table-column
          prop="deviceName"
          label="Device Name"
          min-width="180"
        />
        <el-table-column prop="sn" label="SN" min-width="180" />
        <el-table-column prop="product" label="Product" min-width="150" />
        <el-table-column
          prop="faultyModule"
          label="Faulty Module"
          min-width="150"
        />
        <el-table-column
          prop="systemName"
          label="System Name"
          min-width="260"
          show-overflow-tooltip
        />
        <el-table-column prop="systemId" label="System ID" min-width="160" />
        <el-table-column prop="occurrenceTime" label="Occurrence Time" min-width="180" />
        <el-table-column label="Recovery Time" min-width="180">
          <template #default="{ row }">
            <span>{{ showStatusColumn && !row.recoveryTime ? '-' : row.recoveryTime }}</span>
          </template>
        </el-table-column>
        <el-table-column
          v-if="showStatusColumn"
          label="Status"
          width="100"
          align="center"
        >
          <template #default="{ row }">
            <el-tag :type="row.recoveryTime ? 'info' : 'warning'" disable-transitions>
              {{ row.recoveryTime ? 'Historical' : 'Active' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="Operation"
          width="120"
          fixed="right"
          align="center"
        >
          <template #default="scope">
            <el-button type="primary" link @click="handleDetail(scope.row)">
              Details
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页：由父组件传入 total/currentPage/pageSize 同步控制 -->
    <div class="flex items-center justify-end p-4">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        background
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted } from "vue";
import { ElTable } from "element-plus";
import type { AlertItem } from "../data";

const props = defineProps({
  alertData: {
    type: Array as () => AlertItem[],
    required: true,
    default: () => []
  },
  pagination: {
    type: Object,
    required: true,
    default: () => ({
      total: 0,
      currentPage: 1,
      pageSize: 10
    })
  },
  showStatusColumn: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(["detail", "page-change", "size-change"]);

// 本地当前页引用，用于v-model绑定
const currentPage = ref(props.pagination.currentPage);
const pageSize = ref(props.pagination.pageSize);

// 监听props中的currentPage和pageSize变化，同步到本地
watch(
  () => props.pagination.currentPage,
  newVal => {
    currentPage.value = newVal;
  }
);

watch(
  () => props.pagination.pageSize,
  newVal => {
    pageSize.value = newVal;
  }
);

const handlePageChange = (page: number) => {
  emit("page-change", page);
};

const handleSizeChange = (size: number) => {
  emit("size-change", size);
};

const handleDetail = (row: AlertItem) => {
  emit("detail", row);
};

// 表格引用
const tableRef = ref<typeof ElTable | null>(null);

onMounted(() => {
  // 表格初始化
});
</script>

<style scoped lang="scss">
/* 调整分页组件样式 */
:deep(.el-pagination) {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* 取消分页器非活跃按钮的背景色 */
:deep(.el-pagination .el-pager li) {
  background-color: transparent;
}

/* 设置表格头部样式 */
:deep(.el-table th.el-table__cell) {
  background-color: #f5f7fa;
  color: #606266;
}
</style>
